<template>
	<view>
		<cu-bar bgColor="nav-bg-blue" :isBack="true" placeholder="搜索公交路线 车站" :isSearch="true" @search="searchList"></cu-bar>
		<view class="lines-list" v-if="linesList.length > 0">
			<view class="lines-list-title">线路</view>
			<block v-for="(item,index) of linesList" :key="index">
				<view class="lines-item" @click.end="viewLine(item['id'],item['name'],item)">
					<image src="../../static/line/car.png"></image>
					<view class="lines-bus">
						<view class="lines-bus-name">{{item.name}}</view>
						<view class="lines-bus-dict">{{'开往: ' + item.end_stop}}</view>
					</view>
				</view>
			</block>
		</view>
		<view class="history-list" v-if="histroyList.length > 0 && linesList.length == 0">
			<block v-for="(item,index) of histroyList" :key="index">
				<view class="lines-item" @click.end="viewLine(item['id'],item['name'],'')">
					<image src="../../static/line/car.png"></image>
					<view class="lines-bus">
						<view class="lines-bus-name">{{item.name}}</view>
						<view class="lines-bus-dict">{{'开往: ' + item.end_stop}}</view>
					</view>
				</view>
			</block>
			<view class="lines-item" @click="clearHistory">
				<text class="cuIcon-deletefill" style="float: left;padding: 10rpx;"></text>
				<view class="lines-bus">
					<view class="lines-bus-name">清除历史记录</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				search_text: '',
				histroyList:[],
				linesList:[]
			}
		},
		computed:{
			...mapState(['position','city','akey']),
		},
		onShow() {
			let history = uni.getStorageSync('search_bus_history')
			this.histroyList = history.length > 0 ? JSON.parse(history) : []
		},
		methods: {
			viewLine(id,line_name,item){
				if(item){
					let history = this.histroyList
					history[history.length] = item
					this.histroyList = history
					uni.setStorageSync('search_bus_history',JSON.stringify(this.histroyList))
				}
				uni.navigateTo({
					url:'/pages/home/line?id='+id+'&site_name=&line_name='+line_name
				})
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			clearHistory(){
				let that = this
				uni.showModal({
					content:'确定清除历史记录吗？',
					success(res) {
						if(res.confirm){
							uni.removeStorageSync('search_bus_history')
							that.histroyList = []
						}
					}
				})
			},
			dealSiteLines(){
				let list = this.linesList
				list.forEach((item,index) => {
					list[index].name = item.name.substr(0,item.name.indexOf('('))
				})
				this.linesList = list
			},
			searchList(search_text){
				let that = this
				if(search_text){
					this.linesList = []
					uni.request({
						url:'https://restapi.amap.com/v3/bus/linename?s=rsv3&extensions=all&key='+this.akey+'&output=json&pageIndex=1&city='+this.city+'&offset=10&keywords='+search_text+'&platform=JS&logversion=2.0&sdkversion=1.4.17',
						method:'GET',
						success(result){
							result = JSON.parse(JSON.stringify(result))
							if(typeof result.data !== 'undefined'){
								let carInfo = result.data.buslines
								that.linesList = carInfo
								that.dealSiteLines()
							}
							if(typeof result.buslines !== 'undefined'){
								let carInfo = result.buslines
								that.linesList = carInfo
								that.dealSiteLines()
							}
							
						}
					})
				}else{
					this.linesList = []
				}
			}
		}
	}
</script>

<style>
.lines-list{
	
}
.lines-list .lines-list-title{
	padding: 10rpx;
	font-size: 32rpx;
	color: #999999;
}
.lines-list .lines-item,.history-list .lines-item{
	padding: 20rpx;
	background-color: #ffffff;
	border-bottom: 1px solid #eee;
}
.lines-list .lines-item image,.history-list .lines-item image{
	width: 40rpx;
	height: 40rpx;
	float: left;
	margin: 32rpx;
} 
.lines-list .lines-item .lines-bus,.history-list .lines-item .lines-bus{
	font-size: 32rpx;
}
.lines-list .lines-item .lines-bus .lines-bus-name,.history-list .lines-item .lines-bus .lines-bus-name{
	
}
.lines-list .lines-item .lines-bus .lines-bus-dict,.history-list .lines-item .lines-bus .lines-bus-dict{
	color: #999997;
}
</style>
